<template>
  <div class="form-page">
    <h1 class="title">员工信息录入</h1>
    <form @submit.prevent="submitForm" class="form">
      <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="formData.name" required class="form-control" />
      </div>
      <div class="form-group">
        <label for="id">身份证号:</label>
        <input type="text" id="id" v-model="formData.id" required class="form-control" />
      </div>
      <div class="form-group">
        <label>性别:</label>
        <select v-model="formData.gender" required class="form-control">
          <option disabled value="">请选择性别</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div class="form-group">
        <label>出生日期:</label>
        <input type="date" v-model="formData.birthDate" required class="form-control" />
      </div>
      <div class="form-group">
        <label for="origin">籍贯:</label>
        <input type="text" id="origin" v-model="formData.origin" required class="form-control" />
      </div>
      <div class="form-group">
        <label for="nationality">民族:</label>
        <input type="text" id="nationality" v-model="formData.nationality" required class="form-control" />
      </div>
      <div class="form-group">
        <label>入职日期:</label>
        <input type="date" v-model="formData.entryDate" required class="form-control" />
      </div>
      <div class="form-group">
        <label>政治面貌:</label>
        <select v-model="formData.politicalStatus" required class="form-control">
          <option disabled value="">请选择政治面貌</option>
          <option value="party_member">党员</option>
          <option value="non_party_member">非党员</option>
        </select>
      </div>
      <div class="form-group">
        <label>婚姻:</label>
        <select v-model="formData.maritalStatus" required class="form-control">
          <option disabled value="">请选择婚姻状况</option>
          <option value="married">已婚</option>
          <option value="single">未婚</option>
          <option value="divorced">离异</option>
        </select>
      </div>
      <button type="submit" class="btn">保存</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'FormPage',
  setup() {
    const formData = ref({
      name: '',
      id: '',
      gender: '',
      birthDate: '',
      origin: '',
      nationality: '',
      entryDate: '',
      politicalStatus: '',
      maritalStatus: ''
    });

    const submitForm = () => {
      // 处理表单提交逻辑
      console.log('Form submitted:', formData.value);
      // 这里可以添加发送数据到服务器的代码
    };

    return {
      formData,
      submitForm
    };
  }
};
</script>

<style scoped>
.form-page {
  max-width: 600px; /* 增加最大宽度 */
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.title {
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.5rem;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 0.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  color: #666;
  font-size: 0.9rem;
}

.form-control {
  width: 90%; /* 减少输入框宽度 */
  max-width: 400px; /* 设置最大宽度限制 */
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-size: 0.9rem;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  outline: none;
}

.btn {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.btn:hover {
  background-color: #0056b3;
}

.btn:active {
  transform: scale(0.98);
}
</style>